<template>
  <div class="page">
    <!-- <Close @click="handleClose"></Close> -->
    <Card title="监测点位状态">
      <PieVue ref="pieChart"> </PieVue>
    </Card>
    <Table
      ref="yhtable"
      title="报警列表"
      height="200"
      :headers="['报警点位', '报警参数', '报警时间']"
      :propsData="['monitorName', 'monitorParam', 'monitorStartTime']"
    ></Table>
    <Card title="视频监控" style="position: absolute; bottom: 265px">
      <div class="video-box">
        <!-- <Jk></Jk> -->
      </div>
    </Card>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Close from "../components/close.vue";
import AlarmNum from "../components/AlarmNum.vue";
import Echarts from "../components/Echarts.vue";
import CcgTable from "../components/ccgTable.vue";
import BorderCard from "../components/borderCard.vue";
import { jcdw, dangerBj, bjlb, jklb } from "@/api/threeD.js";
import Table from "../components/table.vue";
import Card from "../components/Card.vue";
import PieVue from "../echarts/pie.vue";
import Jk from "../echarts/video.vue";
export default defineComponent({
  name: "LeftMenu",
  components: {
    AlarmNum,
    CcgTable,
    Close,
    BorderCard,
    Echarts,
    Table,
    Card,
    PieVue,
    Jk,
  },

  data() {
    return {
      marginBottom: 30,
      marginTop: 30,
      jkList: [],
    };
  },
  methods: {
    handleClose() {},
  },

  mounted() {
    jcdw().then((res) => {
      this.$refs.pieChart.setData({
        total: res.data.total,
        data: [
          {
            name: "正常运行",
            value: res.data.normal,
          },
          {
            name: "当前报警",
            value: res.data.anomaly,
          },
        ],
        color: ["#10F3A7", "#FF5F55", "#FF8C21", "#FFCB41"],

        center: "监测点位数",
      });
    });

    bjlb().then((res) => {
      this.$refs.yhtable.setData(res.data);
    });

    jklb().then((res) => {
      this.jkList = res.rows;
    });
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 934px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}

.page {
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  backdrop-filter: blur(10px);
  width: 418px;
  height: 934px;
  overflow: hidden;
  color: #fff;
}

.video-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
